<template>
  <el-row :gutter="10">
    <el-col :xs="24" :md="12">
      <el-card>
        <template #header> <span>关键词搜索</span></template>
        <div class="chart-two">
          <div class="left-chart">
            <div>搜索用户数</div>
            <div>113,918</div>
            <div class="left-chart-content" ref="leftChartRef"></div>
          </div>
          <div class="right-chart">
            <div>搜索量</div>
            <div>113,918</div>
            <div class="right-chart-content" ref="rightChartRef"></div>
          </div>
        </div>
        <el-table :data="tableData" class="mt-10">
          <el-table-column
            type="index"
            label="排名"
            width="80px"
            align="center"
          ></el-table-column>
          <el-table-column label="关键字" prop="0"></el-table-column>
          <el-table-column label="搜索数量" prop="1"></el-table-column>
          <el-table-column label="搜索用户数" prop="2"></el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next" :total="50" />
      </el-card>
    </el-col>
    <el-col :xs="24" :md="12">
      <el-card>
        <template #header> <span> 分类销售排行 </span></template>
        <h5 style="position: absolute">品类分布</h5>
        <div class="pie-chart" ref="pieChartRef"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts">
export default {
  name: 'HomeFooter',
}
</script>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import { left } from '@popperjs/core'
const pieChartRef = ref()
const leftChartRef = ref()
const rightChartRef = ref()
const data = [
  ['北京', 2440, 1626],
  ['上海', 8101, 6660],
  ['广州', 7813, 2196],
  ['深圳', 8888, 7201],
  ['杭州', 8159, 1949],
  ['合肥', 269, 151],
  ['济南', 2045, 1320],
  ['太原', 5693, 2297],
]
const tableData = data.slice(0, 5)

onMounted(() => {
  const myChart1 = echarts.init(leftChartRef.value)
  const myChart2 = echarts.init(rightChartRef.value)
  const myChart3 = echarts.init(pieChartRef.value)
  const option = {
    dataset: {
      source: data,
    },
    xAxis: { type: 'category', show: false, boundaryGap: false },
    yAxis: { show: false },
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      left: 0,
      right: 10,
      top: 0,
      bottom: 0,
    },

    series: [
      {
        type: 'line',
        encode: { x: 0, y: 1 },
        smooth: true,
        areaStyle: {
          color: 'rgba(171,221,241,0.5)',
        },
        lineStyle: {
          color: 'skyblue',
        },
        showSymbol: false,
        itemStyle: { show: false },
      },
    ],
  }
  myChart1.setOption(option)
  const option2 = {
    dataset: {
      source: data,
    },
    xAxis: { type: 'category', show: false, boundaryGap: false },
    yAxis: { show: false },
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      left: 0,
      right: 10,
      top: 0,
      bottom: 0,
    },

    series: [
      {
        type: 'line',
        encode: { x: 0, y: 2 },
        smooth: true,
        areaStyle: {
          color: 'rgba(171,221,241,0.5)',
        },
        lineStyle: {
          color: 'skyblue',
        },
        showSymbol: false,
        itemStyle: { show: false },
      },
    ],
  }
  const option3 = {
    title: {
      text: '累计订单量',
      textStyle: {
        color: '#666',
        fontSize: 14,
      },
      subtext: 406,
      subtextStyle: {
        color: '#666',
        fontSize: 26,
      },
      left: '35%',
      top: '45%',
      textAlign: 'center',
    },
    legend: {
      right: '10%',
      orient: 'vertical',
      top: 'middle',
      formatter: function (name: any) {
        return name + ' |'
      },
    },
    tooltip: {
      tigger: 'item',
    },
    series: {
      name: '品类分布',
      type: 'pie',
      tooltip: {
        formatter: '{a}<br />{b0}<br />数量：{c0}<br />占比：{d}%',
      },
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 2,
      },
      radius: ['30%', '50%'],
      center: ['35%', '50%'],
      data: [
        {
          name: '分娩粥店',
          value: 56,
        },
        {
          name: '简餐便当',
          value: 52,
        },
        {
          name: '汉堡披萨',
          value: 95,
        },
        {
          name: '想过冒菜',
          value: 42,
        },
        {
          name: '小吃炸串',
          value: 30,
        },
        {
          name: '地方菜系',
          value: 69,
        },
        {
          name: '轻食简餐',
          value: 63,
        },
      ],
    },
  }
  myChart2.setOption(option2)
  myChart3.setOption(option3)
})
</script>

<style scoped>
.chart-two {
  display: flex;
  justify-content: space-between;
}
.right-chart,
.left-chart {
  width: 50%;
}
.left-chart-content,
.right-chart-content {
  width: 100%;
  height: 50px;
}
.pie-chart {
  width: 100%;
  height: 400px;
}
.mt-10 {
  margin: 20px 0;
}
</style>
